<template>


    <div id="layout" @click="closeAll">
        <header>
            <TopHead />
            <TopNav />
        </header>
        <main>
            <tg-menu @openturn="openTurn" @openTask="openTask" :search="searchs" @openTerouro="openTerour"
                @openRanking="openRanking" />
            <TgMenuOptiacty></TgMenuOptiacty>

            <section :class="IsCollapse ? 'sectionwidth' : ''">
                <div class="searchBoxoverly" :class="jj()" @click.self="store.$patch({searchBox:false})">
                    <div class="searchBox" >
                        <div>
                            <div class="input">
                                <el-input class="elinput" :prefix-icon="Search" v-model="input"
                                    :placeholder="$t('language.search.placehold')" style="width: 240px">
                                    <template #append>{{ $t('language.search.cancel') }}</template>
                                </el-input>
                                <el-icon class="icon" color="#b5bac8" @click="store.$patch({ searchBox: false })"
                                    size="24">
                                    <Close />
                                </el-icon>
                            </div>
                            <p>{{ $t('language.search.tip') }}</p>
                            <div class="del">
                                <span>{{ $t('language.search.history') }}</span>
                                <el-icon size="16" color="#babac8">
                                    <DeleteFilled />
                                </el-icon>
                            </div>
                            <ul class="game">
                                <li v-for="(item, index) in hangleGameList" :key="index">
                                    <div class="title">
                                        <div class="title-left">
                                            <NuxtImg :src="item.namelogo" alt="" />
                                            <span>{{ $t(item.modulename) }}</span>
                                        </div>
                                        <div class="title-right">
                                            <p>
                                                <el-icon :class="item.start == 1 ? 'opacity' : ''" size="22"
                                                    color="#babac8" @click="prelist(item, index)">
                                                    <ArrowLeft />
                                                </el-icon>
                                                <el-icon size="22"
                                                    :class="item.start == getList(item.children) ? 'opacity' : ''"
                                                    color="#babac8" @click="nextlist(item, index)">
                                                    <ArrowRight />
                                                </el-icon>
                                            </p>
                                        </div>
                                    </div>
                                    <dl :ref="(el: refItem) => handleSetFromMap(el, index, item.children)"
                                        :style="{ width: 100 * getList(item.children) + '%' }">
                                        <template v-for="(child, index) in getList(item.children)" :key="index + '0'">
                                            <dd>
                                                <div
                                                    v-for="(sun, ind) in item.children.slice(6 * index, 6 * (index + 1))">
                                                    <h3>{{ sun.name }}</h3>
                                                    <NuxtImg :src="sun.img" alt="" />
                                                </div>
                                                <div
                                                    v-for="zz in (6 - item.children.slice(6 * index, 6 * (index + 1)).length)">
                                                </div>
                                            </dd>
                                        </template>
                                    </dl>
                                </li>
                            </ul>
                            <!-- <dl class="popular">
                            <dd>
                                <div>
                                    <img src="assets/img/c32.png" alt="">
                                    <span>{{ $t('language.search.popular') }}</span>
                                </div>
                                <div>
                                    <el-icon size="22" color="#babac8">
                                        <ArrowLeft />
                                    </el-icon>
                                    <el-icon size="22" color="#babac8">
                                        <ArrowRight />
                                    </el-icon>
                                </div>
                            </dd>
                            <dd></dd>
                        </dl> -->
                        </div>
                    </div>
                </div>

                <div class="content">
                    <slot></slot>

                </div>

                <!-- v-if="['index'].includes(currentRoute.name)" -->
                <Footers />
            </section>
        </main>
        <ClientOnly>
            <TurnTable ref="turn" />
            <Terouro ref="Terour" />
            <Task ref="task" />
            <Ranking ref="rank" />
            <!-- <Informcao /> -->
        </ClientOnly>

    </div>


</template>

<script setup lang="ts">
import { Close, Search, DeleteFilled, ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { ref ,shallowRef} from "vue"
import { HomeGameList1 } from "../utils/gamelist"
let { currentRoute } = useRouter()
let input = shallowRef<string>('')
let store = useStore()
let IsCollapse = computed<boolean>(() => store.IsCollapse)
// :class="searchs ? 'open' : ''"
// :class="IsCollapse ? 'searchBoxWidth' : ''"
let jj = ():string|any[] => {
    if (IsCollapse.value && searchs.value) {
        return ['searchBoxWidth', 'open']
    }else if(IsCollapse.value==false&&searchs.value==true){
        return ['open']
    }else if(IsCollapse.value==false&&searchs.value==false){
        return []
    }else{
        return ['searchBoxWidth']
    }
}
//整除
let getList = (list: any) => {
    return Math.ceil(list.length / 6);
}
// 动态声明ref节点
type refItem = Element | ComponentPublicInstance | null;
const swiperMap: any = ref({});
const handleSetFromMap = (el: refItem, index: number, item: any) => {
    if (el) {
        swiperMap.value[`swiper${index}`] = el;
    }
};
let hangleGameList = HomeGameList1.map((i: any) => {
    i['start'] = 1
    return i
});
const nextlist = (item: any, index: number) => {
    let time = getList(item.children)
    let step = 100 / time
    let move = null

    if (time - hangleGameList[index]['start'] >= 1) {
        move = step * hangleGameList[index]['start']
        hangleGameList[index]['start']++
    }
    swiperMap.value[`swiper${index}`].style.transform = `translateX(-${move}%)`
}
const prelist = (item: any, index: number) => {
    let time = getList(item.children)
    let step = 100 / time
    let move = null
    if (hangleGameList[index]['start'] - 2 >= 0) {
        move = step * (hangleGameList[index]['start'] - 2)
        hangleGameList[index]['start']--
    }
    swiperMap.value[`swiper${index}`].style.transform = `translateX(-${move}%)`
}
//打开转盘
let turn = ref<any>(null);
let openTurn = () => {
    turn.value.open();
};
// 打开搜索
let searchs = computed<boolean>(() => store.searchBox)

// 打开活动奖励
let Terour = ref<any>(null);
let openTerour = () => {
    Terour.value.opent();
};
// 打开任务
let task = ref<any>(null);
let openTask = () => {
    task.value.opent();
};
//打开比拼
let rank = ref<any>(null);
let openRanking = () => {
    rank.value.open();
};
//关闭所有下拉
let closeAll = () => {
    store.$patch({ topnavopen: false })
    store.$patch({ langAppear: false })
}
</script>

<style scoped lang="scss">
#layout {
    width: 100%;
    height: 100vh;
    @include flex(column, flex-start, center);

    header {
        height: 60px;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 24;
    }

    main {
        height: 100%;
        width: 100%;
        background-color: rgb(26, 26, 26);
        @include flex(row, flex-start, flex-start);
        padding: 60px 0 0 0;

        &::-webkit-scrollbar {
            display: none;
        }

        .sectionwidth {
            width: calc(100vw - 218px);
        }

        section {
            width: calc(100vw - 64px);
            flex: 1;
            padding: 20px 0 0 0;
            position: relative;
            background: #1a1a1a;

            // transition: width 0.4s linear;
            &::-webkit-scrollbar {
                display: none;
            }

            .searchBoxoverly {
                position: fixed;
                right: 0;
                overflow: hidden;
                z-index: 40;
                transition: all 0.05s linear;
                top: 56px;
                width: calc(100vw - 60px);
                height: 0;
                background-color: rgba($color: #000000, $alpha: 0.5);

                .searchBox {


                    width: 100%;
                    height: 0px;
                    background-color: rgb(35, 38, 42);
                    overflow: hidden;
                    transition: height 0.3s ease-in-out;



                    >div {
                        padding: 40px 0px 10px;
                        width: 1270px;
                        margin: 0 auto;

                        .input {
                            width: 100%;
                            @include flex(row, space-between, center);

                            .elinput {
                                flex: 1;
                                height: 40px;
                                border-radius: 8px !important;
                                border: 1px solid rgb(74, 76, 83);

                                &:hover {
                                    border: 1px solid #0a906c;
                                }

                                &:focus-within {
                                    border: 1px solid #0a906c;
                                    outline: none;
                                }

                                &:focus {
                                    border: 1px solid #0a906c;
                                    outline: none;
                                }

                                :deep(.el-input__wrapper) {
                                    height: 38px !important;
                                    border: none !important;
                                }

                                :deep(.el-input-group__append) {
                                    background-color: transparent !important;
                                    border: none !important;
                                    box-shadow: none !important;
                                    border-radius: 8px !important;
                                    background-color: rgb(39, 42, 48) !important;
                                }
                            }

                            .el-icon {
                                margin-left: 10px;
                                cursor: pointer;
                            }
                        }

                        p {
                            margin: 15px 0;
                            font-size: 12px;
                            color: #b5bac8;
                            text-align: center;
                        }

                        .del {
                            @include flex(row, space-between, center);
                            height: 33px;

                            span {
                                font-size: 16px;
                                color: #b5bac8;
                            }
                        }

                        .popular {
                            width: 100%;
                            padding-top: 40px;

                            dd {
                                width: 100%;
                                @include flex(row, space-between, center);

                                div:nth-child(1) {
                                    @include flex(row, flex-start, center);

                                    span {
                                        padding-left: 5px;
                                        color: #b5bac8;
                                        font-weight: bold;
                                        font-size: 16px;
                                    }
                                }

                                div:nth-child(2) {
                                    @include flex(row, flex-end, center);
                                }
                            }
                        }

                    }

                    @media screen and (min-width:1500px) {
                        >div {
                            width: 1270px;
                            margin: 0 auto;

                        }
                    }

                    @media screen and (max-width:1500px) {
                        >div {
                            width: 92%;
                            margin: 0 auto;

                        }
                    }

                    .game {
                        width: 100%;

                        li {
                            width: 100%;
                            overflow: hidden;

                            .title {
                                @include flex(row, space-between, center);
                                margin: 18px 0;

                                .title-left {
                                    @include flex(row, flex-start, center);

                                    img {
                                        width: 24px;
                                        margin-right: 10px;
                                    }

                                    span {
                                        font-size: 24px;
                                        color: #fff;
                                    }
                                }

                                .title-right {
                                    @include flex(row, flex-end, center);

                                    strong {
                                        width: 150px;
                                        display: block;
                                        height: 30px;
                                        color: #fff;
                                        font-weight: normal;
                                        background-color: #0f1012;
                                        line-height: 30px;
                                        border-radius: 5px;
                                        text-align: center;
                                        margin-right: 20px;

                                    }


                                    img {
                                        width: 30px;
                                        border-radius: 5px;
                                    }

                                    img+img {
                                        margin-left: 10px;

                                    }

                                    .el-icon {
                                        cursor: pointer;
                                        transition: opacity 0.2s ease-in;
                                        opacity: 1;
                                    }

                                    .opacity {
                                        opacity: 0;
                                    }
                                }
                            }

                            dl {
                                transition: all 0.4s ease-in-out;
                                width: 100%;
                                @include flex(row, flex-start, center);

                                dd {
                                    width: 100%;
                                    @include flex(row, space-between, flex-start);

                                    >div {
                                        width: 15%;

                                        h3 {
                                            color: #fff;
                                            height: 38px;
                                            line-height: 38px;
                                            font-size: 16px;
                                        }

                                        img {
                                            width: 100%;
                                            border-radius: 10px;
                                        }
                                    }
                                }
                            }
                        }

                    }
                }


            }

            .open {
                height: calc(100vh - 56px);

                .searchBox {
                    height: 500px;
                    overflow-y: auto;

                    &::-webkit-scrollbar {
                        display: none;
                    }
                }


            }



            .searchBoxWidth {
                width: calc(100vw - 218px);
            }



            @media screen and (min-width:1500px) {
                .content {
                    width: 1270px;

                    margin: 0 auto;


                }
            }

            @media screen and (max-width:1500px) {
                .content {
                    width: 90%;
                    margin: 0 auto;


                }
            }


        }

    }
}
</style>